<template>
	<view class="dmm-container dmm-container-grey">
		<view v-for="(item, index) in tradeList" :key="index" class="section tradeList">
			<u-cell-group :border="false">
				<u-cell class="header">
					<view slot="title" class="u-cell__title">
						<text class="text-b">{{item.monthDate | slice(4)}}月团队商户交易额</text>
					</view>
					<view slot="value" class="u-cell__value">
						<text class="text text-primary">{{item.teamTradeSum | toFixed2}}元</text>
					</view>
				</u-cell>
				
				<u-cell title="个人商户交易额">
					<view slot="value" class="u-cell__value">
						<text class="text text-primary">{{item.directTradeSum | toFixed2}}元</text>
					</view>
				</u-cell>
				<u-cell title="团队代理商数" :value="item.teamAgentSum"></u-cell>
				<u-cell title="团队商户数" :value="item.teamMercSum"></u-cell>
				<u-cell title="活跃商户数" :value="item.activeMercSum"></u-cell>
			</u-cell-group>
		</view>
		
		<view v-if="!hasData" class="tip">
			<text>- 没有数据了 -</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	
	export default {
		data() {
			return {
				
			}
		},
		
		computed: {
			...mapState('merchantTrade', ['tradeList', 'hasDate', 'pageNum', 'hasData'])
		},
		
		methods: {
			...mapActions('merchantTrade', ['getTradeList'])
		},
		
		created() {
			this.getTradeList()
		},
		
		onReachBottom() {
			if (this.hasData) this.getTradeList({pageNum: this.pageNum + 1})
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.tradeList {
		padding: 0;
		.u-cell {
			&.header {
				background-color: #fbfbfb;
				border-top-right-radius: $uni-border-radius-lg;
				border-top-left-radius: $uni-border-radius-lg;
				/deep/ .u-line {
					display: none;
				}
			}
			
			/deep/ .u-cell__body {
				padding: 28rpx 30rpx;
			}
			
			/deep/ .u-line {
				width: 630rpx !important;
				margin-left: 30rpx !important;
			}
		}
	}
	
	.tip {
		text-align: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
</style>
